<script lang="ts">
import { reactive, watchEffect, ref } from "vue";
import { defineComponent } from "vue-demi";
import { useRouter } from "vue-router";
import moment from "moment";
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";

export default defineComponent({
  setup() {
    const input2 = ref("");
    let obj = reactive<{ tableData: any[]; total: number; page: number }>({
      tableData: [],
      total: 0,
      page: 1,
    });
    const formatDate = (d: string, fmt = "YYYY-MM-DD") => {
      return moment(d).format(fmt);
    };
    //点击切换page时切换相应页面
    const pageChange = async () => {
      console.log("page", obj.page);
      const { data } = await request.get("/goods/allgoods", {
        params: {
          page: obj.page,
        },
      });
      if (data.code === 200) {
        obj.tableData = data.data.result;
        obj.total = data.data.total;
      }
    };
    watchEffect(pageChange);
    // pageChange()

    //搜索商品
    const saerchGoods = async () => {
      const { data } = await request.get("/goods/allgoods", {
        params: {
          keyword: input2.value,
        },
      });
      if (data.code === 200) {
        obj.tableData = data.data.result;
        obj.total = data.data.sometotal;
      } else if(data.code === 400) {
        ElMessage.error('没有搜索到数据！')
        obj.tableData = []
        obj.total = 0
      }
    };

    

    //点击添加跳转到添加模块
    const router = useRouter();
    const addItem = () => {
      // 跳转到添加页面
      router.push("add");
    };

    //编辑数据
    const editItem = (id:string)=>{
      router.push({name:'GoodsEdit',params:{id}})
    }

    //删除单个商品
    const removeItem = async (id: number | string) => {
      const { data } = await request.delete(`/goods/allgoods/${id}`);

      if (data.code === 200) {
        ElMessage.success("删除成功");
        pageChange();
      }
    };

    return {
      obj,
      pageChange,
      formatDate,
      addItem,
      removeItem,
      input2,
      Search,
      saerchGoods,
      editItem
    };
  },
});
</script>

<template>
  <div>
    <el-row>
      <el-col :span="18">
        <el-button type="success" @click="addItem">
          添加<el-icon class="el-icon--right"><CirclePlusFilled /></el-icon>
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-input
          v-model="input2"
          class="w-50 m-2"
          placeholder="搜索商品"
          :suffix-icon="Search"
          @change="saerchGoods"
        />
      </el-col>
    </el-row>
    <el-table :data="obj.tableData" style="width: 100%; margin-top: 15px">
      <el-table-column label="#" type="index" width="50" />
      <el-table-column prop="goodsname" label="商品名称" />
      <el-table-column prop="qty" label="库存" width="150" />
      <el-table-column prop="time_reg" label="添加时间" v-slot="{ row }">
        {{ formatDate(row.time_reg) }}
      </el-table-column>
      <el-table-column prop="category" label="类别" width="150" />
      <el-table-column prop="price" label="价格" width="150" />
      <el-table-column prop="action" label="操作" width="180" v-slot="{ row }">
        <el-button type="primary" circle @click="editItem(row.id)">
          <el-icon class="el-icon--middle"><Edit /></el-icon>
        </el-button>
        <el-popconfirm
          title="确认删除吗？"
          confirm-button-text="是"
          cancel-button-text="否"
          @confirm="removeItem(row.id)"
        >
          <template #reference>
            <el-button type="danger" circle>
              <el-icon class="el-icon--middle"><DeleteFilled /></el-icon>
            </el-button>
          </template>
        </el-popconfirm>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      background
      layout="total, prev, pager, next"
      :total="obj.total"
      class="mt-4"
      v-model:current-page="obj.page"
      @current-change="pageChange"
    />
  </div>
</template>
<style scoped>
.mt-4 {
  margin-top: 15px;
}
</style>
